<template>
  <div class="my-tag">
    <input
      class="input"
      type="text"
      @blur="close"
      @keyup.enter="$event.target.blur()"
      :value="value"
      ref="input"
      v-if="isEdit"
      placeholder="请输入标签"
    />
    <p @dblclick="showInput" v-else>{{ value }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value:{
      type : String,
      required : true,
    }
  },
  data() {
    return {
      msg: "111",
      isEdit: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    close(e) {
      if (e.target.value.trim === "") {
        alert("标签不能为空！");
      } else {
        this.$emit("input", e.target.value);
      }
      this.isEdit = false;
    },
    showInput() {
      this.isEdit = true;
      this.$nextTick(() => this.$refs.input.focus());
    },
  },
};
</script>

<style scoped></style>
